<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
    <header class="header f-jc-sb m-b-10">
      <h3 class="xl m-b-20">收支记账</h3>
      <div class="right">
        <el-button type="primary" icon="plus">新增账目</el-button>
        <el-popover
          placement="bottom-start"
          title=""
          width=""
          trigger="click"
          content="">
          <template #reference><el-button class="moreAction"><i class="more"></i></el-button></template>
        </el-popover>
      </div>
    </header>

    <div class="toolbar">
      <span class="total">共{{ 1 }}条</span>
      <el-input v-model="recordData.amountOrNots" class="m-l-10" style="width: 200px;" placeholder="请输入金额/备注" clearable/>
      <el-date-picker v-model="recordData.time" class="m-l-10" is-range
      range-separator="至" type="monthrange" start-placeholder="创建时间"
      end-placeholder="结束时间" clearable>
      </el-date-picker>
      <el-select v-model="recordData.classification" class="m-l-10" placeholder="账目分类" style="width: 200px">
        <!-- <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        /> -->
      </el-select>
      <el-select v-model="recordData.paymentMethod" class="m-l-10" placeholder="支付方式" style="width: 200px">
        <!-- <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        /> -->
      </el-select>
      <el-button plain class="m-l-10"><i class="remove"></i></el-button>
      
    </div>
    <common-table :tableData="recordData.tableData" :tableColumn="recordData.tableColumn"></common-table>
  </el-card>
  
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const recordData = reactive({
  tableData: [],
  tableColumn: [
  {label: '收支时间', prop: 'time', type: 'default', width: '120px', align: 'start', sortable: true, template: 'text'},
  {label: '记账类型', prop: 'accountingType', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: '收支金额(元)', prop: 'amount', type: 'default', width: '150px', align: 'start', template: 'icon'},
  {label: '支付方式', prop: 'paymentMethod', type: 'default', width: '150px', align: 'start', template: 'tag'},
  {label: '账目分类', prop: 'classification', type: 'default', width: '120px', align: 'start', template: 'text'},
  {label: '操作时间', prop: 'actionTime', type: 'default', width: '120px', align: 'start',sortable: true, template: 'text'},
  {label: '备注', prop: 'notes', type: 'default', align: 'start', template: 'text'},
  {label: '操作', prop: 'action', type: 'default', width: '200px', align: 'start', template: 'action', fixed: 'right'},
  ],
  time: '',
  amountOrNots: '',
  classification: '',
  paymentMethod: ''
})
</script>

<style lang="scss" scoped>
.header {
  .right {
    ::v-deep .moreAction {
      padding: 7px;
      border: 1px solid #9fa0a2;

      &:hover {
        background-color: transparent;
      }
    }
    .more {
      content: url('@/assets/images/more.svg');
    }
  }
}
</style>